<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="tabs">
				<u-tabs
					:list="list1"
					lineColor="#4BC264"
					@change="change"
					:current="current"
					:activeStyle="{
						color: '#1C274C',
						fontWeight: 'bold',
						transform: 'scale(1.02)'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 50px; padding-right: 50px; height: 42px;"
				></u-tabs>
			</view>
		</u-sticky>

		<view class="states">
			<view class="state">
				<text class="dian d1"></text>
				使用中
			</view>
			<view class="state">
				<text class="dian d2"></text>
				空闲中
			</view>
			<view class="state">
				<text class="dian d3"></text>
				已预定
			</view>
		</view>

		<view class="lsit-box">
			<template v-if="current == 0">
				<view class="each" v-for="(item, index) in tableList" @click="$authTo('/pages/Table-detail/Table-detail?id=' + item.id)">
					<image class="table-bac" src="../../static/table-bac.png" mode=""></image>
					<view class="item-state" v-if="item.status == 0">空闲中</view>
					<view style="line-height: 62rpx" class="occupy occupy1 z-font-24" v-if="item.status == 1">已预定</view>
					<view class="occupy occupy1 in-use" v-if="item.status == 2">
						<text>剩余</text>
						<view>
							{{calculateRemainingTime(item.overtime*1000).hours }}时{{calculateRemainingTime(item.overtime*1000).minutes }}分
						</view>
					</view>
					<view class="item-name">{{ item.name }}</view>
				</view>
			</template>

			<template v-if="current == 1">
				<view class="each each2" v-for="(item, index) in tableList">
					<image class="table2-bac" src="../../static/table2-bac.png" mode=""></image>
					<view class="item-state" v-if="item.status == 0">空闲中</view>
					<view style="line-height: 62rpx" class="occupy occupy2 z-font-24" v-if="item.status == 1">已预订</view>
					<view class="occupy occupy2 in-use" v-if="item.status == 2">
						<text>剩余</text>
						<view>
							{{calculateRemainingTime(item.overtime*1000).hours }}时{{calculateRemainingTime(item.overtime*1000).minutes }}分
						</view>
					</view>
					<view class="item-name">{{ item.name }}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list1: [],
			current: 0,
			page: 1,
			tableList: []
		};
	},
	onLoad() {
		this.gettabs();
	},
	methods: {
		getTable(cate_id) {
			this.$api
				.post('/getMyTables', {
					page: this.page,
					cate_id
				})
				.then((res) => {
					if (res.data) {
						this.tableList = res.data;
					}
				})
				.catch((res) => {});
		},
		gettabs() {
			this.$api
				.post('/getCate')
				.then((res) => {
					if (res.code == 1) {
						this.list1 = res.data;
						this.getTable(this.list1[0].id);
					}
				})
				.catch((res) => {});
		},
		change(e) {
			console.log(e);
			this.current = e.index;
			this.getTable(e.id);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}
.tabs {
	padding: 0 32rpx;
	display: flex;
	justify-content: center;
}

.states {
	display: flex;
	padding: 24rpx 0 0 32rpx;
	.state {
		margin-right: 64rpx;
		text {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			margin-right: 16rpx;
		}
		.d1 {
			background: #ff7b18;
		}
		.d2 {
			background: #4bc264;
		}
		.d3 {
			background: #a4a9b7;
		}
		font-weight: 500;
		font-size: 20rpx;
		color: #1c274c;
	}
}

.lsit-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 32rpx;
	.each {
		width: 331rpx;
		height: 197rpx;
		background: #473d3f;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 24rpx;
		text-align: center;
		position: relative;
		.item-state {
			width: 98rpx;
			height: 98rpx;
			margin: auto;
			border-radius: 50%;
			margin-top: 24rpx;
			background: #4bc264;
			border: 3rpx solid #ffffff;
			font-weight: 500;
			font-size: 22rpx;
			color: #ffffff;
			line-height: 98rpx;
			position: relative;
		}
		.item-name {
			font-weight: 500;
			font-size: 22rpx;
			color: #ffffff;
			margin-top: 10rpx;
			position: relative;
		}

		.occupy {
			width: 98rpx;
			height: 82rpx;
			background: #a4a9b7;
			border: 3rpx solid #ffffff;
			margin: auto;
			border-radius: 50%;
			background: #a4a9b7;
			border: 3rpx solid #ffffff;
			font-weight: 500;
			color: #ffffff;
			padding-top: 16rpx;
			text {
				font-size: 22rpx;
			}
			view {
				font-size: 18rpx;
			}
		}
		.occupy1 {
			margin-top: 24rpx;
			position: relative;
		}
		.occupy2 {
			margin-top: 93rpx;
			position: relative;
		}
		.in-use {
			background-color: #ff7b18;
		}

		.table-bac {
			width: 331rpx;
			height: 197rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.each2 {
		width: 331rpx;
		height: 331rpx;
		background: #72443b;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.table2-bac {
			width: 331rpx;
			height: 331rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.item-state {
			margin-top: 93rpx;
			position: relative;
		}
		.item-name {
			margin-top: 16rpx;
		}
	}
}
</style>
